<template>
  <div id="app">
    <router-view />
    <van-tabbar v-show="!$route.meta.hidetabbar" v-model="tabactive" active-color="#ee0a24" route>
      <van-tabbar-item :to="{ name: 'home' }">
        <template #icon="props">
          <img :src="props.active ? tabbaricons.homeactive : tabbaricons.homeinactive" />
        </template>
        首页
      </van-tabbar-item>
      <van-tabbar-item :to="{ name: 'type' }">
        <template #icon="props">
          <img :src="props.active ? tabbaricons.typeactive : tabbaricons.typeinactive" />
        </template>
        选型
      </van-tabbar-item>
      <van-tabbar-item :to="{ name: 'cart' }">
        <template #icon="props">
          <img :src="props.active ? tabbaricons.cartactive : tabbaricons.cartinactive" />
        </template>
        购物车
      </van-tabbar-item>
      <van-tabbar-item :to="{ name: 'person' }">
        <template #icon="props">
          <img :src="props.active ? tabbaricons.personactive : tabbaricons.personinactive" />
        </template>
        个人中心
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabactive: 0,
      tabbaricons: {
        homeactive: require("@/assets/img/tabbar/home-active.png"),
        homeinactive: require("@/assets/img/tabbar/home.png"),
        typeactive: require("@/assets/img/tabbar/type-active.png"),
        typeinactive: require("@/assets/img/tabbar/type.png"),
        cartactive: require("@/assets/img/tabbar/cart-active.png"),
        cartinactive: require("@/assets/img/tabbar/cart.png"),
        personactive: require("@/assets/img/tabbar/person-active.png"),
        personinactive: require("@/assets/img/tabbar/person.png"),
      }
    };
  },
};
</script>

<style lang="less">
.van-tabbar-item {
  .van-tabbar-item__icon {
    img {
      width: 22px;
      height: 22px;
      margin-bottom: 2px;
    }
  }
}

#app {
  font-family: -apple-system, miui, Source Han Sans CN, Microsoft YaHei, Helvetica, sans-serif;
}
</style>
